<style scoped lang="scss">
.two-trees {
  padding: 0px 2%;
  display: flex;
  justify-content: space-between;
  .left-tree {
    width: 48%;
  }
  .right-tree {
    width: 48%;
  }
}

.dialog__body {
  background-color: #f3f3fa;
  border: 1px solid #bbbbbb;
  height: 65vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.button-group {
  margin: 20px 0 0 10px;
  display: flex;
  justify-content: flex-end;

  &__info {
    margin-right: 10px;
  }
}

.tab-group {
  margin: 10px 0 0 0;
  height: 100%;

  ::v-deep .el-tabs__nav-wrap {
    padding: 10px 10px 0 10px;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
  }

  ::v-deep .el-tabs__nav-scroll {
    background-color: #ffffff;
    margin-bottom: 5px;
  }

  ::v-deep .el-tabs__nav {
    margin-left: 10px;
  }

  ::v-deep .el-tabs__nav-wrap:after {
    height: 0;
  }

  ::v-deep .el-tab-pane {
    padding: 0 10px;
  }

  .form {
    margin-top: 8px;
  }
  ::v-deep .el-form-item {
    margin-right: 0 !important;
  }
  ::v-deep .el-form-item__label {
    position: absolute;
  }
  ::v-deep .el-form-item__content {
    width: 30%;
  }
  ::v-deep .el-select,
  .el-input__inner {
    width: 100%;
  }
}

::v-deep .el-table th.is-leaf {
  background-color: #ffffff !important;
}

.button-group__footer {
  display: flex;
  flex-direction: row-reverse;
  margin: 20px 10px 10px 0;
  //position: absolute;
  //bottom: 5px;
  //right: 0;
  &__cancel {
    margin: 0 0 0 10px;
  }
}
.explain-block {
  div {
    font-weight: 700;
    font-size: 14px;
  }
  p {
    margin: 5px;
    font-size: 12px;
    text-indent: 2em;
  }
}
</style>
<template>
  <div class="dialog__body">
    <div class="button-group">
      <el-popover placement="right" width="200" trigger="click">
        <div class="explain-block">
          <div>功能：</div>
          <p>{{ explainData.funDescription }}</p>
          <div>输入端口：</div>
          <p>{{ explainData.inPort }}</p>
          <div>输出端口：</div>
          <p>{{ explainData.outPort }}</p>
          <div>参数：</div>
          <p>{{ explainData.functionName }}</p>
        </div>
        <mine-button
          slot="reference"
          type="primary"
          class="button-group__info"
          @click="getExplainInfo('fileOut')"
          ><i class="iconfont icon-help-circle-line"></i>说明</mine-button
        >
      </el-popover>
    </div>
    <div class="tab-group">
      <!-- <el-table
        class="table border-table"
        :data="rightList"
        style="width: 100%"
        v-loading="loading"
        :height="tableHeight"
        ref="multipleTable"
      >
        <el-table-column label="字段名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="输出"
          prop="fileName"
          show-overflow-tooltip
        ></el-table-column>
      </el-table> -->
      <div class="two-trees">
        <div class="left-tree">
          <h3>字段名</h3>
          <el-tree
            :data="leftList"
            :props="defaultProps"
            @node-click="leftTreeClick"
            :style="cssVars"
          ></el-tree>
        </div>
        <div class="right-tree">
          <h3>输出</h3>
          <el-tree
            :data="rightList"
            :props="defaultProps"
            @node-click="rightTreeClick"
            :style="cssVars"
          ></el-tree>
        </div>
      </div>
      <!--                    <mine-pagination-->
      <!--                        @numberChange="numberChange"-->
      <!--                        :total="total"-->
      <!--                        :page-size="pageSize"-->
      <!--                        :current-page="currentPage">-->
      <!--                    </mine-pagination>-->
      <el-form ref="form" :model="form" label-width="140px" class="form">
        <el-form-item label="是否输出到数据集:">
          <el-radio-group
            v-model="form.outMaterial"
            @change="outMaterialChange"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据集类型:" v-show="form.outMaterial == 1">
          <el-radio-group v-model="form.fileType">
            <el-radio label="data_predict">数据预测</el-radio>
            <el-radio label="data_unsupervised">无监督学习</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文件名:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="文件类型:">
          <el-select v-model="form.type" placeholder="请选择文件类型">
            <el-option label=".xlsx" value="2"></el-option>
            <el-option label=".txt" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-group__footer">
      <mine-button
        type="primary"
        secondary
        class="button-group__footer__cancel"
        @click="close"
        >取消</mine-button
      >
      <mine-button type="primary" @click="confirm">确定</mine-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { downloadFile } from "@/utils/common";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";

export default {
  name: "OutputOpera",
  props: {
    currentOperatorData: {
      type: Object,
    },
    fileDataList: {
      type: Array,
    },
  },
  data() {
    return {
      loading: false,
      leftList: JSON.parse(JSON.stringify(this.fileDataList)),
      rightList: [],
      form: {
        name: "",
        type: "",
        outMaterial: 0,
        fileType: "",
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      explainData: {}, // 说明数据
    };
  },
  computed: {
    tableHeight: function () {
      return 0.5 * window.innerHeight + "px";
    },
    cssVars() {
      return {
        "--tree-height": 0.4 * window.innerHeight - 50 + "px",
      };
    },
  },
  methods: {
    outMaterialChange() {
      this.form.fileType = "";
    },
    async getExplainInfo(type) {
      let res = {};
      let _self = this;
      if (_self.$qwebUtil.isQtClient) {
        const uuid = _self.$qwebUtil.generateRandomUUID();
        let sendObject;
        /* eslint-disable-next-line */
        const channel = new QWebChannel(
          window.qt.webChannelTransport,
          async function (channel) {
            sendObject = channel.objects.sendObject;
            // receivedJSON 修改此处发送请求参数
            const receivedJSON = {
              RequestUrl: `/helpInfo/getTree?helpCode=${type}`,
              RequestMethod: "get",
              ContentType: "application/json;charset=UTF-8",
              RequestBody: {},
              isStringParam: true,
              requestId: uuid,
            };
            await send();
            await _self.$qwebUtil.receive(sendObject, receivedJSON);
            // console.error('received','/feCanvas/pageList')
          }
        );
        /* eslint-disable-next-line */
        async function send() {
          sendObject.sendMessage.connect(function (data) {
            if (!data) {
              console.error("No data received.");
            }
            res = JSON.parse(data);
            const result = res.response || {};
            // update the followings
            if (result.success && res.webInfo.requestId == uuid) {
              _self.explainData = result?.data;
            } else {
              _self.$message.warning("获取说明信息失败！");
            }
          });
        }
      } else if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          `/helpInfo/getTree?helpCode=${type}`,
          "get",
          "application/json;charset=UTF-8",
          {},
          true,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.status === 200 && e.data.webInfo.requestId === uuid) {
              this.explainData = res?.data;
            } else {
              this.$message.warning("获取说明信息失败！");
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch("getOperatorExplain", type);
        if (res.data.success) {
          this.explainData = res.data?.data;
        } else {
          this.$message.warning("获取说明信息失败！");
        }
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    close() {
      this.$emit("changeFlag");
    },
    // 当前行的删除
    detectRow(row) {
      // 移除当前点击的数据
      this.rightList = this.rightList.filter((item) => {
        if (row.id === item.id) {
          return false;
        }
        return true;
      });
      // 添加到左边表格
      this.leftList.push(row);
    },
    // 确定按钮
    async confirm() {
      let titles = this.rightList.map((item) => {
        return item.name;
      });
      let params = {
        exportType: this.form.type,
        name: this.form.name,
        outMaterial: this.form.outMaterial,
        titles: titles,
        id: this.currentOperatorData.id,
        fileType: this.form.fileType,
      };
      let res = null;
      let _self = this;
      if (_self.$qwebUtil.isQtClient) {
        const uuid = _self.$qwebUtil.generateRandomUUID();
        let sendObject;
        /* eslint-disable-next-line */
        const channel = new QWebChannel(
          window.qt.webChannelTransport,
          async function (channel) {
            sendObject = channel.objects.sendObject;
            // receivedJSON 修改此处发送请求参数
            const receivedJSON = {
              RequestUrl: "/feOperator/exportCacheData",
              RequestMethod: "post",
              ContentType: "application/json;charset=UTF-8",
              RequestBody: params,
              isStringParam: false,
              requestId: uuid,
            };
            await send();
            await _self.$qwebUtil.receive(sendObject, receivedJSON);
            // console.error('received','/feCanvas/pageList')
          }
        );
        /* eslint-disable-next-line */
        async function send() {
          sendObject.sendMessage.connect(function (data) {
            if (!data) {
              console.error("No data received.");
            }
            res = JSON.parse(data);
            const result = res.response || {};
            // update the followings
            if (result.success) {
              _self.$message.success("下载成功");
              _self.close();
            } else {
              _self.$message.error(result.msg);
            }
          });
        }
      } else if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          "/feOperator/exportCacheData",
          "post",
          "application/json;charset=UTF-8",
          params,
          false,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.success) {
              this.$message.success("下载成功");
              this.close();
            } else {
              this.$message.error(res.msg);
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch("postOutput", params);
        if (res.data.status === 200) {
          this.$message.success("保存成功");
          this.close();
        }
      }
    },
    // 左侧列表的点击事件
    leftTreeClick(data) {
      // 移除当前点击的数据
      this.leftList = this.leftList.filter((item) => {
        if (data.id === item.id) {
          return false;
        }
        return true;
      });
      // 添加到右边表格
      this.rightList.push(data);
    },
    // 右侧列表的点击事件
    rightTreeClick(data) {
      // 移除当前点击的数据
      this.rightList = this.rightList.filter((item) => {
        if (data.id === item.id) {
          return false;
        }
        return true;
      });
      // 添加到右边表格
      this.leftList.push(data);
    },
  },
  created() {
    // this.getOutputList();
  },
};
</script>
